<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="admin/include :: header('用户列表')" />
	<th:block th:include="admin/include :: ztree-css" />
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content fadeInRight">
	    <div class="row">
	        <div class="col-sm-6">
	            <div class="container-div">
					<div class="row">
				        <div class="col-sm-12 select-table table-striped">
				        	<h6>用户列表</h6>
						    <table id="bootstrap-table"></table>
						</div>
					</div>
				</div>
	        </div>
	        
	        <div class="col-sm-6">
	            <div class="container-div">
					<div class="row">
						<div class="btn-group-sm" id="toolbar" role="group">
				             <a class="btn btn-primary" onclick="authUser()" shiro:hasPermission="system:user:edit">
					            <i class="fa fa-edit"></i> 分配角色
					        </a>
				        </div>
				        <div class="col-sm-12 select-table table-striped">
				        	<h5><span id="authRole"></span></h5>
						    <table id="bootstrap-table1"></table>
						</div>
					</div>
				</div>
	        </div>
	    </div>
	</div>
	
	<th:block th:include="admin/include :: footer" />
	<th:block th:include="admin/include :: ztree-js" />
	<script th:inline="javascript">
		var prefix = ctx + "admin/sys/user";

		$(function() {
		    var panehHidden = false;
		    if ($(this).width() < 769) {
		        panehHidden = true;
		    }
		    queryUserList();
		    queryRoleList();
		});

		function queryUserList() {
		    var options = {
		        url: ctx + "admin/sys/user/list",
		        sortName: "createTime",
		        showRefresh: false,
		        showColumns: false,
                showToggle: false,
                search: false,
                showSearch: false,
                clickToSelect: true,
		        modalName: "用户",
		        columns: [
		        {
		            field: 'userId',
		            title: '用户ID'
		        },
		        {
		            field: 'loginName',
		            title: '登录账号'
		        },
		        {
		            field: 'userName',
		            title: '用户名称'
		        }]
		    };
		    $.table.init(options);
		}
		
		function queryRoleList() {
				var options = {
					id: 'bootstrap-table1', 
			        url: ctx + "admin/sys/role/list",
			        showRefresh: false,
			        showColumns: false,
	                showToggle: false,
	                search: false,
	                showSearch: false,
			        modalName: "角色",
			        columns: [{
			            checkbox: true
			        },
			        {
			            field: 'roleId',
			            title: '角色编号'
			        },
			        {
			            field: 'roleName',
			            title: '角色名称'
			        },
			        {
			            field: 'roleKey',
			            title: '权限字符'
			        }]
			    };
			    $.table.init(options);
		}
		
		// 查询分配的角色
	    $(document).on("click", '#bootstrap-table tbody tr', function() {
			$('#bootstrap-table tbody tr').removeClass('selected');
			$(this).toggleClass('selected');
	    	if($(this).hasClass('selected')) {
	        	var userId = $($(this).find('td')[0]).html();
	        	var userName = $($(this).find('td')[2]).html();
	        	$('#bootstrap-table1 tbody tr').removeClass('selected');
	        	$('#bootstrap-table1 input').removeAttr('checked');
	        	$('#authRole').text('::人员【' + userName + '】的角色');
	        	$.ajax({
	        		type: 'GET',
	        		url: '/admin/sys/user/rela/listRole',
	    			data : {userId : userId},
	    			dataType: 'json',
	    			success : function(result) {
	    				if (result.code == 200) {
	    					var rows = result.data;
	    					for(var i=0; i< rows.length;i++) {
	    						var userRole = rows[i];
	    						$('#bootstrap-table1 tbody tr').each(function(i) {
	    							var roleId = $($(this).find('td')[1]).html();
	    							if(roleId == userRole.roleId){
	    								$(this).find('input').prop('checked', 'checked');
	    								$(this).addClass('selected');
		    						}
	    			    	    });
	    					}
	    				} else {
	    					$.modal.msgWarning(result.msg);
	    				}
	    			}
	        	}); 
	    	}
	    });
		
		/* 用户管理-部门 */
		function dept() {
			var url = ctx + "admin/sys/dept";
			$.modal.openTab("部门管理", url);
		}
		// 更新用户的角色信息
		function authUser(){
			var userLength = $('#bootstrap-table tbody tr.selected').length;
			if(userLength <= 0){
				$.modal.msgWarning("请选择用户");
				return;
			}
			
			var userId = $($('#bootstrap-table tbody tr.selected').find('td')[0]).html();
			var roleIds = [];
			$('#bootstrap-table1 tbody tr.selected').each(function(i) {
				var roleId = $($(this).find('td')[1]).html();
				roleIds.push(roleId);
    	    });
			console.info('roleIds:' + roleIds)
			$.ajax({
        		type: 'POST',
        		url: '/admin/sys/user/update/role',
    			data : {userId: userId, roleIds: roleIds},
    			dataType: "json",
    			success : function(result) {
    				if(result.code == 200){
    					$.modal.alertSuccess(result.msg);
    				}
    			}
        	});
		}

	</script>
</body>
</html>